import useWebAnimations from "@wellyshen/use-web-animations";
import React, { useEffect } from "react";

export default function MyBox(props) {
  const { ref, animate } = useWebAnimations();
  useEffect(() => {
    animate({
      keyframes: { transform: `translate(${props.pos * 50}px,0px)` },
      animationOptions: { duration: 300, fill: "forwards" },
    });
  }, [props.pos]);

  return (
    <div
      style={{
        position: "absolute",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        fontSize: "20px",
      }}
      ref={ref}
    >
      <div
        style={{
          width: "40px",
          border: "solid",
          borderWidth: "0px 2px 2px 2px",
          height: "300px",
        }}
      ></div>
      <div>{props.number}</div>
    </div>
  );
}
